<!--
 * @Author: your name
 * @Date: 2021-08-24 14:54:52
 * @LastEditTime: 2021-09-12 20:24:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\login\index.vue
-->
<template>
    <div class="Login_content">
        <Row>
            <Col :xs="{ span: 0 }" :lg="{ span: 13 }">
                <div class="Login_content_text">
                    <div class="Login_content_text_Logo">
                        <img src="@/assets/logo/logologin.svg" alt="logo" /><span
                            class="nowarp"
                        >Vue-Admin</span>
                    </div>
                    <div class="Login_content_text_img">
                        <img src="@/assets/image/logoban.svg" />
                    </div>
                    <div class="Login_content_text_title">前端中控管理系统</div>
                    <div class="Login_content_text_dires">这是一款简易后台管理系统</div>
                </div>
            </Col>
            <Col :xs="{ span: 24 }" :lg="{ span: 0 }">
                <div class="miniLogin_content_text_Logo">
                    <img src="@/assets/logo/logologin.svg" alt="logo" />
                    <span class="text nowarp">Vue-Admin</span>
                </div>
            </Col>
            <Col :xs="{ span: 24 }" :lg="{ span: 7 }">
                <div class="fromcontent">
                    <div class="login_content_from">
                        <div
                            :class="[
                                loading ? 'loading' : '',
                                'login_content_from_logo',
                                'anmitions',
                            ]"
                        >
                            <Col
                                :xs="{ span: 0 }"
                                :lg="{ span: 24 }"
                            >
                                <h1 class="text nowarp">Welcome to login！</h1>
                            </Col>
                        </div>
                        <div class="login_content_from_inputs">
                            <div
                                :class="[
                                    'login_content_from_inputs_item',
                                    loading ? 'loading' : '',
                                    'anmitions',
                                ]"
                            >
                                <input
                                    v-model="name"
                                    type="text"
                                    placeholder="用户名:admin"
                                    :class="[ruls.errorText['name'] ? 'inputError' : '']"
                                    @input="onInputName"
                                />
                                <div class="error">
                                    <p :class="[ruls.errorText['name'] ? 'active' : '']">
                                        {{ ruls.nameError }}
                                    </p>
                                </div>
                            </div>
                            <div
                                :class="[
                                    'login_content_from_inputs_item',
                                    loading ? 'loading' : '',
                                    'anmitions',
                                ]"
                            >
                                <input
                                    v-model="psd"
                                    type="password"
                                    placeholder="密码:admin123"
                                    :class="[ruls.errorText['psd'] ? 'inputError' : '']"
                                    @input="onInputPsd"
                                />
                                <div class="error">
                                    <p :class="[ruls.errorText['psd'] ? 'active' : '']">
                                        {{ ruls.psdError }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div
                            :class="[
                                'login_content_from_roles',
                                loading ? 'loading' : '',
                                'anmitions',
                            ]"
                        >
                            <div class="login_content_from_roles_checked">
                                <ARadio class="checked"> 记住我 </ARadio>
                            </div>
                            <div class="login_content_from_roles_forgin">忘记密码</div>
                        </div>
                        <div
                            :class="[
                                'login_content_from_btns',
                                loading ? 'loading' : '',
                                'anmitions',
                            ]"
                        >
                            <button :class="[isLogin ? 'islogin' : '']" @click="onLogin">
                                <ASpin v-show="isLogin" class="loads" />
                                <p>登录</p>
                            </button>
                             <Col
                                :xs="{ span: 0 }"
                                :lg="{ span: 24 }"
                            >
                                 <div class="otherlogin">
                                        <p class="otherlogin_text">其他登录方式</p>
                                       <div class="otherlogin_code">
                                             <div @click="toQrcodes">
                                               <img src="../../assets/svg/qrcode.svg" alt="">
                                             </div>
                                       </div>
                                 </div>
                            </Col>
                        </div>
                    </div>
                </div>
            </Col>
        </Row>
        <!-- Code login -->
       <VlogCode @handldCode="handldCodes" :isload="isShowCode"></VlogCode>
    </div>
</template>

<script lange="ts">
import { defineComponent, reactive, ref } from 'vue'
import { Row, Col,Divider } from 'ant-design-vue'
import { SetLocalStrong, GetLocalStrong } from '../../ntils/hooks'
import { useStore } from 'vuex'
import { key } from '../../store/index'
import {  router } from '../../router/index'
import VlogCode from './component/logcode.vue'
export default defineComponent({
    name: 'Login',
    components: {
        Row,
        Col,
        Divider,
        VlogCode
        
    },
    setup() {
        let isLogin = ref()
        isLogin.value = false
        let name = ref()
        name.value = ''
        let psd = ref()
        psd.value = ''
        //     验证状态
        let status = ref()
        status.value = false
        let ruls = reactive({
            nameError: '',
            psdError: '',
            errorText: {
                psd: 0,
                name: 0,
            },
        })
        //     登录
        function onLogin() {
            if (isLogin.value) return
            let User = {
                name: name.value,
                psd: psd.value,
                roles: ['super'],
            }
            regitem(name.value, psd.value)
            if (status.value) {
                if (name.value == 'admin') {
                    if (psd.value == 'admin123') {
                        isLogin.value = true
                        setTimeout(() => {
                            this.$store.commit('user/USER_LOGIN', User)
                        }, 200)
                    } else {
                        status.value = false
                        ruls.errorText.psd = 1
                        ruls.psdError = '密码不正确'
                    }
                } else {
                    status.value = false
                    ruls.errorText.name = 1
                    ruls.nameError = '用户名不存在'
                }
            }
        }
        const onInputName = () => {
            if (name.value.length > 12) {
                status.value = false
                ruls.errorText.name = 1
                ruls.nameError = '名称长度限制5-12'
            } else {
                status.value = true
                ruls.errorText.name = 0
            }
        }
        const onInputPsd = () => {
            if (psd.value.length > 10) {
                status.value = false
                ruls.errorText.psd = 1
                ruls.psdError = '密码长度限制6-10'
            } else {
                status.value = true
                ruls.errorText.psd = 0
            }
        }
        function regitem(name, psd) {
            status.value = true
            ruls.errorText = {
                psd: 0,
                name: 0,
            }
            if (name.length < 1) {
                status.value = false
                ruls.errorText.name = 1
                ruls.nameError = '名称不能为空'
            }
            if (psd.length < 1) {
                status.value = false
                ruls.errorText.psd = 1
                ruls.psdError = '密码不能为空'
            }
        }
        // 加载动画
        let loading = ref()
        loading.value = true
        setTimeout(() => {
            loading.value = false
        }, 100)
        // 扫码登录
        const isShowCode = ref();
        isShowCode.value=false;
        const toQrcodes = ()=>{
              isShowCode.value=true;
        }
        const handldCodes = (e)=>{
             isShowCode.value=e;
        }
        return {
            onLogin,
            toQrcodes,
            handldCodes,
            isShowCode,
            loading,
            onInputName,
            onInputPsd,
            isLogin,
            name,
            psd,
            ruls,
        }
    },
})
</script>

<style lang="less" scoped>
.codetext{
    font-size: 12px;
}
.otherlogin{
   width: 100%;
    text-align: center;
     .otherlogin_text{
       width: 100%;
       display: inline-block;
       font-size: 11px;
       margin: 15px 0;
     }
     &_code{
         display: flex;
         align-items: center;
         justify-content: center;
         &>div{
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                box-shadow: .4rem .4rem .8rem #c8d0e7,-.4rem -.4rem .8rem #e4e9f7;
                padding: 5px 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
             &>img{
                      width: 100%;
                      height: 100%;
             }
         } 
     }
}
.text {
  font-family: century gothic, texgyreadventor, stheiti, sans-serif;
}
.nowarp {
  white-space: nowrap;
}
.miniLogin_content_text_Logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -8rem;
  padding-top: 3rem;
  img {
    width: 5rem;
    height: 5rem;
  }
  span {
    font-size: 30px;
    font-weight: bold;
    margin-left: 1rem;
  }
}
.fromcontent {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  //  background: red;
  margin: auto;
  padding: 10px 30px;
  box-sizing: border-box;
}
.Login_content_text {
  width: 40%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  //  align-items: center;
  justify-content: center;
  margin: auto;
  &_img {
    width: 13rem;
    height: 12rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &_Logo {
    display: flex;
    align-items: center;
    //   margin-bottom: 10px;
    img {
      width: 5rem;
      height: 5rem;
    }
    span {
      font-size: 30px;
      font-weight: bold;
      margin-left: 1rem;
    }
  }
  &_title {
    font-weight: 100;
    margin-bottom: 23px;
    font-size: 26px;
  }
  &_dires {
    font-size: 16px;
    color: #666;
  }
}
.login_content_from {
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 10px 10px;
  .loading {
    transform: translateX(100px);
    opacity: 0;
  }
  .anmitions {
    transition: all 0.5s ease-in-out 0s;
    &:nth-of-type(1) {
      transition-delay: 0.4s;
    }
    &:nth-of-type(2) {
      transition-delay: 0.6s;
    }
    &:nth-of-type(3) {
      transition-delay: 0.8s;
    }
    &:nth-of-type(4) {
      transition-delay: 1s;
    }
  }
  &_logo {
    img {
      width: 5rem;
      height: 5rem;
    }
  }
  &_roles {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    &_checked {
      color: #666;
      font-size: 12px;
      .checked {
        font-size: 12px;
      }
    }
    &_forgin {
      color: #ee933f;
      font-size: 12px;
      cursor: pointer;
    }
  }
  &_inputs {
    width: 100%;
    &_item {
      width: 100%;
      margin: 10px 0;

      .error {
        color: rgb(238, 85, 85);
        font-size: 12px;
        height: 20px;

        p {
          transform: translateY(-10px);
          opacity: 0;
          transition: all 0.2s ease-in 0s;
          display: inline-block;
          &.active {
            transform: translateY(0);
            opacity: 1;
          }
        }
      }

      input {
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        padding: 7px 7px;
        transition: all 0.2s ease-in 0s;
        &:focus {
          border-color: #007fff;
        }
        &.inputError {
          border: 1px solid rgb(238, 85, 85);
        }
      }
    }
  }
  &_btns {
    margin-top: 10px;
    button {
      width: 100%;
      height: 40px;
      background: #ee933f;
      border: none;
      outline: none;
      color: #fff;
      padding: 10px 0;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease 0s;
      opacity: 1;
      &.islogin {
        background: rgba(255, 136, 0, 0.575);
        opacity: 0.6;
        p {
          margin-left: 20px;
        }
      }
      .loads {
        margin-top: 6px;
      }
      p {
        display: inline-block;
        margin: 0;
        margin-left: 10px;
        transition: all 0.2s ease 0s;
      }
    }
  }
}
</style>
